<template>
    <!-- menu菜单 -->
    <el-aside :width="width">
        <el-menu
        background-color="#545c64"
        text-color="#fff"
        :collapse="isCollapse"
        :collapse-transition="false"
        :default-active="activeMenu"
      >
      <h3 v-show="!isCollapse">通用后台管理系统</h3>
      <h3 v-show="isCollapse">后台</h3>

       <!-- 一级菜单 -->
      <el-menu-item 
        v-for="item in noChildren"
        :index="item.path"
        :key="item.path"
        @click="handleMenu(item)"

      >
        <component class="icons" :is="item.icon"></component>
        <span>{{ item.label }}</span>
        </el-menu-item>
       <!-- 折叠子菜单 -->
        <el-sub-menu 
            v-for="item in hasChildren"
            :index="item.path"
            :key="item.path"
            >
          <template #title>
             <component class="icons" :is="item.icon"></component>
             <span>{{ item.label }}</span>
          </template>
          <el-menu-item-group >
            <el-menu-item 
                v-for="(subItem,subIndex) in item.children"
                :key="subItem.path"
                :index="subItem.path"
                @click="handleMenu(subItem)"
            >
                <component class="icons" :is="subItem.icon"></component>
                <span>{{ subItem.label }}</span>
            </el-menu-item>
          </el-menu-item-group>
         
         
        </el-sub-menu>
       
       
        
      </el-menu>
  
    
    </el-aside>
</template>


<script setup>
import { ref,computed } from 'vue'
import {useAllDataStore} from '@/stores'
import { useRouter,useRoute } from 'vue-router'

// 数据
// const list =ref([
//       	{
//           path: '/home',
//           name: 'home',
//           label: '首页',
//           icon: 'house',
//           url: 'Home'
//       	},
//         {
//             path: '/mall',
//             name: 'mall',
//             label: '商品管理',
//             icon: 'video-play',
//             url: 'Mall'
//         },
//         {
//             path: '/user',
//             name: 'user',
//             label: '用户管理',
//             icon: 'user',
//             url: 'User'
//         },
//         {
//             path: '/other',
//             label: '其他',
//             icon: 'location',
//             children: [
//                 {
//                     path: '/other/page1',
//                     name: 'page1',
//                     label: '页面1',
//                     icon: 'setting',
//                     url: 'Page1'
//                 },
//                 {
//                     path: '/other/page2',
//                     name: 'page2',
//                     label: '页面2',
//                     icon: 'setting',
//                     url: 'Page2'
//                 }
//             ]
//         }
// ])
const list=computed(()=>stores.state.menuList)
const noChildren= computed(()=>list.value.filter(item=>!item.children))
const hasChildren= computed(()=>list.value.filter(item=>item.children))
const stores=useAllDataStore()
const isCollapse= computed(()=>stores.state.isCollapse)
const width=computed(()=>stores.state.isCollapse?'64px':'180px')
// console.log(isCollapse.value)
const router=useRouter()
const route=useRoute()


const activeMenu=computed(()=>route.path)
const handleMenu=(item)=>{
  router.push(item.path)
  stores.selectMenu(item)
}

</script>

<style lang="less" scoped>
.icons{
    width: 18px;
    height: 18px;
    margin-right: 5px;
}
.el-menu {
    border-right: none;
   h3{ 
    line-height: 48px;
    color: #fff;
    text-align: center;
   }
   

 }

.el-aside {
    height: 100%;
    background-color: #545c64;
}

</style>

